<!DOCTYPE html>
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>购物车页面</title>
    <link href="./assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="./assets/animate.css/animate.min.css" rel="stylesheet" type="text/css">
    <link href="./assets/fontawesome/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="./assets/slick/slick.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css">
    <link href="./assets/css/theme.min.css" rel="stylesheet" type="text/css">
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	</head>
  
  <body class="body">
	  <div id="app">
    <div class="page-loader cube-loader">
      <div class="loader-wrap">
        <div class="loader-1 loader-element"></div>
        <div class="loader-2 loader-element"></div>
        <div class="loader-4 loader-element"></div>
        <div class="loader-3 loader-element"></div>
      </div>
    </div>
<header class="header-colorfull header-horizontal header-over header-view-side">
      <div class="container">
        <nav class="navbar">
          <a class="navbar-brand" href="indextest.html">
            <span class="logo-element-line">
              <span class="logo-icon">
                <span class="svg-content svg-fill-theme" data-svg="./assets/images/svg/logo-part.svg"></span>
              </span>
              <span class="logo-text" style="font-weight:bold">乐淘淘线上购物管理系统</span></span>
          </a>
          <button class="navbar-toggler" type="button">
            <i class="fas fa-bars nav-show"></i>
            <i class="fas fa-times nav-hide"></i>
          </button>
          <div class="navbar-collapse">
            <div class="container">
              <ul class="navbar-nav" >
                <li class="nav-item  nav-hover-show-sub" style="cursor: pointer;">
                  <a class="nav-link" onclick="window.location.href='zhanghu.html'" data-role="nav-toggler" style="font-weight:bold">个人中心
				 
    
                <li class="nav-item nav-item-arrow-down nav-hover-show-sub" style="cursor: pointer;">
                  <a class="nav-link"  data-role="nav-toggler" style="font-weight:bold">相关页面
                    <span class="nav-arrow">
                      <i class="fas fa-chevron-down"></i></span>
                  </a>
                  <ul class="collapse nav">
                    <li class="nav-item nav-item-arrow-down nav-hover-show-sub">
						
					<li class="nav-item nav-item-arrow-down nav-hover-show-sub">
					  <a class="nav-link" href="#" data-role="nav-toggler" style="font-weight:bold">我要打卡
					    <span class="nav-arrow">
					      <i class="fas fa-chevron-down"></i></span>
					  </a>
					  <ul class="collapse nav">
					    <li class="nav-item">
					      <a class="nav-link" href="sign.html" style="font-weight:bold">打卡滴滴</a></li>
					  </ul>
					</li>	
						
					<li class="nav-item nav-item-arrow-down nav-hover-show-sub">
					  <a class="nav-link" href="#" data-role="nav-toggler" style="font-weight:bold">关于我们
					    <span class="nav-arrow">
					      <i class="fas fa-chevron-down"></i></span>
					  </a>
					  <ul class="collapse nav">
					    <li class="nav-item">
					      <a class="nav-link" href="about-us-alt.html" style="font-weight:bold">"我们"的简介</a></li>
					  </ul>
					</li>
					
					<li class="nav-item nav-item-arrow-down nav-hover-show-sub">
					  <a class="nav-link" href="#" data-role="nav-toggler" style="font-weight:bold">盈销情况
					    <span class="nav-arrow">
					      <i class="fas fa-chevron-down"></i></span>
					  </a>
					  <ul class="collapse nav">
					    <li class="nav-item">
					      <a class="nav-link" href="yingxiao.html" style="font-weight:bold">盈销记录</a></li>
					  </ul>
					</li>
					
                    <li class="nav-item nav-item-arrow-down nav-hover-show-sub">
                      <a class="nav-link" href="#" data-role="nav-toggler" style="font-weight:bold">推荐好文
                        <span class="nav-arrow">
                          <i class="fas fa-chevron-down"></i></span>
                      </a>
                      <ul class="collapse nav">
                        <li class="nav-item">
                          <a class="nav-link" href="article-sidebar-right.html" style="font-weight:bold">每日推荐</a></li>
                      </ul>
                    </li>
					

					
                    <li class="nav-item nav-item-arrow-down nav-hover-show-sub">
                      <a class="nav-link" href="#" data-role="nav-toggler" style="font-weight:bold">商品管理
                        <span class="nav-arrow">
                          <i class="fas fa-chevron-down"></i></span>
                      </a>
                      <ul class="collapse nav">
                        <li class="nav-item">
                          <a class="nav-link" href="shop-sidebar-right.html"  style="font-weight:bold">总览购买页</a></li>
                        <li class="nav-item">
                          <a class="nav-link" href="shop-product-sidebar-right.html"  style="font-weight:bold">商品介绍页</a></li>
                      </ul>
                    </li>

                  </ul>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="shop-sidebar-right.html" style="font-weight:bold">购物商店</a></li>
                <li class="nav-item">
                  <a class="nav-link" href="blog-alt-sidebar-right.html" style="font-weight:bold">博客列表</a></li>
                <li class="nav-item">
                  <a class="nav-link" href="contact-us.html" style="font-weight:bold">联系我们</a></li>
              </ul>
              <div class="navbar-extra">
                <ul class="actions-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="#">
                      <i class="fas fa-search"></i>
                      <span class="navbar-mobile">&nbsp;&nbsp;淘一下</span></a>
                  </li>
                  <li class="nav-item nav-item-arrow-down nav-hover-show-sub">
                    <a class="nav-link" href="shop-sidebar-right.html" style="font-weight:bold;font-size: 1rem;">购&nbsp;物
                      <span class="nav-arrow">
                        <i class="fas fa-chevron-down"></i></span>
                    </a>
                    <ul class="collapse nav">
                      <li class="nav-item">
                        <a class="nav-link" href="shop-sidebar-right.html" style="font-weight:bold">购&nbsp;物</a></li>
                      <li class="nav-item">
                        <a class="nav-link" href="blog-alt-sidebar-right.html" style="font-weight:bold">博&nbsp;客</a></li>
                    </ul>
                  </li>
                  <li class="nav-item nav-item-arrow-down nav-hover-show-sub">
                    <a class="nav-link" href="#" data-role="nav-toggler"  style="font-weight:bold;font-size: 1rem;">水果
                      <span class="nav-arrow">
                        <i class="fas fa-chevron-down"></i></span>
                    </a>
                    <ul class="collapse nav">
                      <li class="nav-item">
                        <a class="nav-link" href="#">水&nbsp;&nbsp;果</a></li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">水 果 蔬 菜</a></li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">蔬 菜</a></li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="login.html"  style="font-weight:bold;font-size: 1rem;">
                      <i class="fas fa-user"></i>&nbsp;&nbsp;退 出</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="orderList1.html">
                      <i class="fas fa-shopping-bag"></i>
                      <span class="navbar-mobile">&nbsp;&nbsp;Cart</span>
                      <span class="cart-quantity">
                        <span class="badge badge-pill badge-cart">3</span></span>
                    </a>
                  </li>
                </ul>
                <div class="navbar-info">
                  <div class="navbar-info-title">We are the student of</div>
                  <div class="navbar-info-value">C W N U</div></div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </header>
     <section class="after-head top-block-page with-back white-curve-after section-white-text">
      <div class="overflow-back bg-theme"></div>
      <div class="content-offs-stick my-5 container">
        <div class="section-solid with-back">
          <div class="full-block">
            <div class="section-back-text">Shop</div>
            <img class="d-none d-lg-block z-index-3" src="./assets/images/content/x/mandarin.png" alt="" data-size="280px" data-at="10%;bottom 35%">
            <img class="d-none d-lg-block z-index-3" src="./assets/images/content/x/kiwi-blur.png" alt="" data-size="137px" data-at="right 5%;35%">
            <img class="d-none d-lg-block z-index-3" src="./assets/images/content/x/shpinat-2.png" alt="" data-size="50px" data-at="65%;0%;-25deg"></div>
          <div class="z-index-4 position-relative text-center">
            <h1 class="section-title">购物车</h1>
          </div>
        </div>
      </div>
    </section>
    <div class="container">
     <style>
     { margin:0 auto; width:320px; height:100px; border:1px solid #F00}
     </style>
	 
	 <div class="row clearfix">
	     <div class="col-md-12">
	         <div class="page-header">
	             <h1>
	                 <small>购物车页面</small>
	             </h1>
	         </div>
	     </div>
	     <div>      
	         <div>
	             <form  style="float:right" class="form-inline">
	                 <span style="color:red;font-weight: bold"></span>
	                 <input type="text" v-model="categoryName"  class="form-control" placeholder="请输入要查询的水果种类"/>
	 				<a  class="btn btn-primary" v-bind:href="'orderList2.html?id='+categoryName">查询</a>
					<a  class="btn btn-primary" v-bind:href="'order.html?id='+itemArray">确定付款</a>
	             </form>
	         </div>
	     </div>
	 </div>
	 <div class="row clearfix">
	     <div class="col-md-12">
	         <table class="table table-hover table-striped">
	             <thead>
	             <tr>
	 					<td>账单ID编号</td>
	 					<td>购买商品名称</td>
	 					<td>购买的数量</td>
	 					<td>商品单价</td>
	 					<td>总费用</td>
	 					<td>商品类型</td>
	             </tr>
	             </thead>
	             <tbody>
	            
	                 <tr v-for="item in itemArray">
	 						<td>{{item.id}}</td>
	 						<td>{{item.commodityName}}</td>
	 						<td>{{item.amount}}</td>
	 						<td>{{item.commodityPrice}}</td>
	 						<td>{{item.cost}}</td>
	 						<td>{{item.commodityCategory}}</td>
	 						
	 
	                     <td>
	                         <a class="btn btn-primary"
	                            href="#" v-on:click="deleteItemById(item.id)">删除</a>
	                     </td>
	                        
	                 </tr>
	             </tbody>
	         </table>
	     </div>
	 </div>
    </div>
	</div>
    <div class="scroll-top">
      <i class="fas fa-long-arrow-alt-up"></i>
    </div>
    <script src="./assets/jquery/jquery-3.3.1.min.js"></script>
    <script src="./assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="./assets/shuffle/shuffle.min.js"></script>
    <script src="./assets/waypoints/jquery.waypoints.min.js"></script>
    <script src="./assets/slick/slick.min.js"></script>
    <script src="./assets/js-cookie/js.cookie.js" type="text/javascript"></script>
    <script src="./assets/js/gmap/silver.js"></script>
    <script src="./assets/js/script.js"></script>
    <script async defer="defer" src="https://ditu.google.cn/maps/api/js?key=AIzaSyBDBAbNXaCDOzujLCykXUvTylfbL1wUcaM&callback=initMap"></script>
  </body>
  <script src="assets/js/vue.js"></script>
  <script src="assets/js/axios.min.js"></script>
  <script src="assets/js/const.js"></script>
  		<script>
  			var config = {
  					"el": "#app",
  					"data": {
  						"categoryName":"",
  						
  						"itemArray": []
  					},
  					"methods": {
  						"deleteItemById":function(id){
  							var serverUrl = baseUrl+"/orderlist/deleteById?id="+id;
  							axios.get(serverUrl)
  							.then(function(response){
  								var code = response.data.code;
  								if(code==0){
  									window.alert("删除成功")
  									this.vue.selectItemAll();
  								}else{
  									window.alert("删除失败")
  								}
  							})
  							.catch();
  						},
  						"selectItemAll": function() {
  							
  							var serverUrl = baseUrl + "/orderlist/selectAll";
  							console.log(serverUrl);
  							axios.get(serverUrl)
  								.then(function(response) {
  									// window.alert("成功");
  									var serverResult = response.data;
  									//serverResult有三个属性，分别是code ,msg,data
  									var categorylist = serverResult.data;
  									//把服务器返回的集合放到data中的categoryArray;
  									//在then中的访问data中的变量,加this.vue
  									this.vue.itemArray = categorylist;
  								})
  								.catch(function(response) {
  									window.alert("失败");
  								})
  						}
  					},
  					"mounted": function() {
  						//window.alert("wakk");
  						this.selectItemAll();
  					}
  				};
  				var vue = new Vue(config);
  		</script>
</html>